<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title></title>

        <style>

            body{
                background-color:#F9F9F9;
            }
        
            .my-style{

                width:300px;
                height:300px;

                background-color:#FFFFFF;

                position:static;/*默认定位，不能做为子元素基准*/

            }

            .my-style:hover{
                box-shadow: 2px 8px 10px 5px #DDDDDD;
            }

            .my-fixed{
                width:50px;
                height:50px;
                border:1px solid red;

                position:fixed;
                top:100px;
                left:500px;

            }

            .my-relative{
                position: relative;
                top:100px;

                width:50px;
                height:50px;
                border:1px solid blue;
            }
        
        </style>
        
    </head>
    <body>
       
       <div class="my-style"></div>

       <div class="my-fixed"></div>
       <div class="my-relative">relative</div>
       <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>

       
       
        
    </body>

</html>